<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.staticfile.org/scrollReveal.js/4.0.9/scrollreveal.min.js"></script>
  <title>Document</title>
  <style>

    main {
      height: 100px;
      overflow-x: hidden;
overflow-y: auto;
background-color: beige;
    }
    .headline {
      visibility: hidden;
    }
.widget-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
    .widget {
      /* visibility: hidden; */
      margin: 10px;
    }
  </style>
</head>

<body>
 <!-- <main class="container"> -->
<div>
  <h1 class="headline">
    Widget Inc.
  </h1>
  <p class="tagline">
    The perfect widgets.
    <div><span class="punchline">Forever.</span></div>
  </p>
  <ul class="widget-list">
  </ul>
</div>
 <!-- </main> -->
  <script>
    let i = 0;

  setTimeout(() => {
    while (i < 2200) {
      i += 1;
      const li = document.createElement("li");
      li.innerHTML = `${i}`;
      li.classList.add("widget");
      document.querySelector(".widget-list").appendChild(li);

    }
    
    ScrollReveal().reveal('.widget', { delay: 0 });
  }, 1000);
    ScrollReveal({ reset: true }).reveal('.headline', {
      delay: 800, distance: '150%',
      origin: 'bottom',
      // cleanup: false
    });
    // ScrollReveal().reveal('.tagline', { delay: 1000 });
    ScrollReveal().reveal('.punchline', { delay: 1200 });
    // setTimeout(() => {
    //   debugger;
    //   ScrollReveal().clean('.headline');
    // }, 6000);


    
    // ScrollReveal({ reset: true }).reveal(".apps", {
    //             delay: 800,
    //             distance: "150%",
    //             origin: "bottom",
    //         });
  </script>
</body>

</html>